
import React from 'react'
import ReactDOM from 'react-dom'

import * as UnitAction  from '../../actions/UnitAction';
import { connect }  from 'react-redux';

class SuggestionSettingEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {
        title: '亲爱的业主，您好，您有1份快递已经被人代领。',
        remark: '如有疑问，请联系物业服务中心，联系电话：023-88888888',

      },
      showList: false
    }
  }

  componentWillReceiveProps() {
    // console.log("componentWillReceiveProps")
  }

  componentDidMount() {
    this.$unitList = $(ReactDOM.findDOMNode(this.refs.unitLists));
    // $(this.refs.SuggestionStartTime).datetimepicker({
    //   format: 'HH:mm',
    //   inline: true
    // });
  }

  componentDidUpdate () {
    var units = this.props.data;
    var self = this;
    if (units && units.success) {
      if (units.data.length == 0 || !this.state.showList) {
        this.$unitList.hide();
      }else if (!this.state.data.unit_number || this.state.data.unit_number.trim() == ''){
        this.$unitList.hide();
      }
      else {
        this.$unitList.show();
      }
    }else {
      this.$unitList.hide();
    }
  }


  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  onUnitNumberChange(event) {
    var value = $(event.target).val();
    var data = this.state.data;
    data.unit_number = value;
    this.setState({
      data: data,
      showList: true
    })
    this.props.dispatch(
      UnitAction.loadUnitsAsync({unit_number: value})
    )
  }

  onUnitNumberClick(event) {
    var value = $(event.target).html();
    var data = this.state.data;
    data.unit_number = value;
    this.setState({
      data: data,
      showList: false
    })
  }

  onDataSubmit() {
    var data = this.state.data;
    console.log(data)

    this.props.onNewSuggestionSubmit(data)
    this.setState({
      data: {
        title: '亲爱的业主，您好，您有1份快递已经被人代领。',
        remark: '如有疑问，请联系物业服务中心，联系电话：023-88888888'
      }
    })
  }

  pad(n) {
    return n < 10 ? "0"+n : n;
  }

  renderUnitList() {
    var units = this.props.data
    var self = this;
    if (units.success) {
      if (units.data.length == 0 || !this.state.showList) {
        // this.$unitList.hide();
        return ""
      }else if (!this.state.data.unit_number || this.state.data.unit_number.trim() == ''){
        // this.$unitList.hide();
        return ""
      }
      else {
        // this.$unitList.show();
        return units.data.map(function(data) {
          return (
            <li className="list-group-item"
                onClick={(event)=>self.onUnitNumberClick(event)}>{data.unit_number}</li>
          )
        })
      }
    }else {
      return "";
    }
  }

  render() {
    var self = this;
    var Suggestion = self.state.data.Suggestion,
        unit = self.state.data.unit;
    return (
      <div className="modal fade" id="SuggestionSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="Suggestion-modal-label">物流消息</h4>
            </div>
            <div className="modal-body">
              <div className="panel panel-default">
                <div className="panel-body">
                  <p>{self.state.data.title}</p>
                  <p>存放单号：<span>{self.state.data.order_numer}</span></p>
                  <p>领取人昵称：<span>{self.state.data.name}</span></p>
                  <p>{self.state.data.remark}</p>
                </div>
              </div>
              <div className="form-group">
                <label for="Suggestion-name">标题</label>
                <input ref="SuggestionName" type="text" className="form-control"
                        id="Suggestion-name" placeholder="标题" value={this.state.data.title}
                        onChange={(event)=>this.onChange(event, "title")} />
              </div>
              <div className="form-group">
                <label for="Suggestion-name">快递单号</label>
                <input ref="SuggestionName" type="text" className="form-control"
                        id="Suggestion-name" placeholder="快递单号" value={this.state.data.order_numer}
                        onChange={(event)=>this.onChange(event, "order_numer")} />
              </div>
              <div className="form-group">
                <label for="Suggestion-name">领取人</label>
                <input ref="SuggestionName" type="text" className="form-control"
                        id="Suggestion-name" placeholder="领取人" value={this.state.data.name}
                        onChange={(event)=>this.onChange(event, "name")} />
              </div>
              <div className="form-group">
                <label for="Suggestion-name">备注</label>
                <input ref="SuggestionName" type="text" className="form-control"
                        id="Suggestion-name" placeholder="备注" value={this.state.data.remark}
                        onChange={(event)=>this.onChange(event, "remark")} />
              </div>
              <div className="form-group">
                <label for="Suggestion-name">户号</label>
                <input ref="SuggestionName" type="text" className="form-control"
                        id="Suggestion-name" placeholder="户号" value={this.state.data.unit_number}
                        onChange={(event)=>this.onUnitNumberChange(event)} />
                <div className="unit-lists" ref="unitLists">
                  <ul className="list-group">
                    {this.renderUnitList()}
                  </ul>
                </div>
              </div>

            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>发送</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    data: state.units
  }
}

export default connect(mapStateToProps)(SuggestionSettingEdit)
